// 写的代码就是webpack的配置信息，所有的配置项都在这里面开始写
const path = require("path") //Nodejs提供模块，可以获取到项目目录的绝对路径
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const webpack = require("webpack")


const pages = ["login", "index", "register","index2"]


// 动态生成HTML插件配置
function listPagePlugin() {
    return pages.map(item => {
        return new HtmlWebpackPlugin({
            template: `./src/${item}.html`, //代表默认要打包的文件路径
            filename: `${item}.html`, //要打包的文件名字
            chunks: [item] //对应的这个html文件默认引入对应同名js文件
        })
    })
}
// 动态生成entry配置
function listEntry(){
    let items = {}
    pages.forEach(item=>{
        items[item] = `./src/js/${item}.js`
    })
    return items
}


module.exports = {
    mode: "development",  //配置打包的模式。production：生产模式 developmenet：开发模式
    entry: {
        ...listEntry()
    },
    output: {
        // __dirname nodejs里面的全局的变量，获取当前文件目录
        path: path.resolve(__dirname, "dist"),  //将项目中index.js文件打包后放在dist文件夹下面
        filename: "js/[name].js"
    },
    module: {
        rules: [
            {
                test: /\.css$/i, //寻找以.css结尾的文件
                // exclude:/node_modules/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            },
            {
                test: /\.scss$/i, //寻找以.css结尾的文件
                exclude: /node_modules/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|webp)$/i, //寻找以.css结尾的文件
                exclude: /node_modules/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 1024 * 10, //图片小于10kb的时候。默认将图片转化为base64位编码
                        outputPath: "./images/",
                        esModule: false  //图片这个插件和其他会出现冲突。设置位false可以避免冲突
                    }
                }
            },
            {
                test: /.(html|htm)$/i,
                use: ["html-withimg-loader"]
            }
        ]
    },
    plugins: [
        // 配置jquery默认引入到js文件中
        new webpack.ProvidePlugin({
            "$": "jquery"  //import $ from "jquery"
        }),
        ...listPagePlugin(),

        new MiniCssExtractPlugin({
            filename: "./css/[name].css"
        })
    ],
    devServer: {
        port: 8001, //修改端口号
        open: ['login.html'], //启动服务器，打开本地默认浏览器
        hot: true, //启动热更新
        // openPage:"index.html" //默认打开的页面是谁
        proxy:{ //配置代理服务器，如果发现你url地址里面有/api要代理请求后端 这个代理只能开发模式使用
            "/api":{
                target:"http://127.0.0.1:3000",
                pathRewrite:{
                    '^/api':""
                }
            }
        }
    },
    resolve:{
        alias:{
            "@css":path.resolve(__dirname,"./src/css"),
            "@scss":path.resolve(__dirname,"./src/scss"),
            "@js":path.resolve(__dirname,"./src/js")
        }
    }
}